<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专利管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="/css/main.css" rel="stylesheet">
</head>
<body>
<!-- 导航栏 -->
<nav id="main-navbar" class="navbar fixed w-full z-50 bg-transparent transition-all duration-300">
    <div class="container mx-auto px-4 py-3">
        <div class="flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-white">专利管理系统</a>

            <!-- 桌面导航 -->
            <div class="hidden md:flex space-x-8">
                <a href="#" class="text-white hover:text-blue-300 transition-colors">首页</a>
                <a href="#patents" class="text-white hover:text-blue-300 transition-colors">专利查询</a>
                <a href="#visualization" class="text-white hover:text-blue-300 transition-colors">数据可视化</a>
                <a href="#legal" class="text-white hover:text-blue-300 transition-colors">法律法规</a>
                <a href="#contact" class="text-white hover:text-blue-300 transition-colors">联系我们</a>
            </div>

            <!-- 用户操作 -->
            <div class="hidden md:flex items-center space-x-4">
                <a href="login.html" class="text-white hover:text-blue-300 transition-colors">登录</a>
                <a href="register.html" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-colors">注册</a>
            </div>

            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-white text-2xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>

        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="md:hidden hidden mt-4 bg-white rounded-lg shadow-lg p-4">
            <div class="flex flex-col space-y-3">
                <a href="#" class="text-gray-800 hover:text-blue-600 transition-colors">首页</a>
                <a href="#patents" class="text-gray-800 hover:text-blue-600 transition-colors">专利查询</a>
                <a href="#visualization" class="text-gray-800 hover:text-blue-600 transition-colors">数据可视化</a>
                <a href="#legal" class="text-gray-800 hover:text-blue-600 transition-colors">法律法规</a>
                <a href="#contact" class="text-gray-800 hover:text-blue-600 transition-colors">联系我们</a>
                <div class="flex space-x-3 pt-2">
                    <a href="/login" class="text-blue-600 hover:text-blue-800 transition-colors">登录</a>
                    <a href="/register" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-colors">注册</a>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- 轮播图 -->
<div id="carousel" class="relative">
    <div class="carousel-item bg-cover bg-center h-screen flex items-center" style="background-image: url('https://picsum.photos/id/128/1920/1080');">
        <div class="container mx-auto px-4">
            <div class="max-w-2xl bg-white/90 p-8 rounded-lg shadow-xl">
                <h2 class="text-4xl font-bold text-gray-800 mb-4">高效管理专利的服务平台</h2>
                <p class="text-lg text-gray-600 mb-6">专利管理系统提供全方位的专利服务，涵盖查询、可视化数据，相关法律法规展示等多样化服务</p>
                <a href="/register" class="inline-block bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg shadow-lg transition-all hover:scale-105">立即开始使用</a>
            </div>
        </div>
    </div>
</div>

<!-- 系统功能 -->
<section id="features" class="py-20 bg-white">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-16">系统功能</h2>

        <div class="grid md:grid-cols-3 gap-8">
            <div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                    <i class="fa fa-search text-blue-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">专利查询与检索</h3>
                <p class="text-gray-600">快速检索和查询专利信息，支持多种搜索条件组合，提高检索效率。</p>
            </div>

            <div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
                    <i class="fa fa-calendar-check-o text-green-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">年费提醒</h3>
                <p class="text-gray-600">智能提醒专利年费缴纳时间，避免因疏忽导致专利失效，降低管理成本。</p>
            </div>

            <div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
                    <i class="fa fa-file-text-o text-purple-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">文档管理</h3>
                <p class="text-gray-600">集中管理专利相关文档，包括申请文件、证书、变更通知等，方便查阅和共享。</p>
            </div>

            <div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-6">
                    <i class="fa fa-line-chart text-yellow-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">统计分析</h3>
                <p class="text-gray-600">多维度统计专利数据，生成直观报表和图表，辅助决策制定和战略规划。</p>
            </div>

            <div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-6">
                    <i class="fa fa-users text-red-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">团队协作</h3>
                <p class="text-gray-600">支持多用户协作，设置不同权限级别，实现专利信息的安全共享和高效协作。</p>
            </div>

            <div class="feature-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                    <i class="fa fa-shield text-indigo-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">数据安全</h3>
                <p class="text-gray-600">采用多层次数据安全保障机制，确保专利信息的安全性和完整性，防止数据泄露。</p>
            </div>
        </div>
    </div>
</section>

<!-- 专利查询 -->
<section id="patents" class="py-20 bg-gray-50">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-16">专利查询</h2>

        <div class="bg-white p-8 rounded-xl shadow-lg mb-12">
            <form class="grid md:grid-cols-3 gap-6">
                <div class="form-group">
                    <label for="patent-title" class="block text-gray-700 font-medium mb-2">专利名称</label>
                    <input type="text" id="patent-title" class="form-control w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div class="form-group">
                    <label for="patent-number" class="block text-gray-700 font-medium mb-2">专利号</label>
                    <input type="text" id="patent-number" class="form-control w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div class="form-group">
                    <label for="patent-type" class="block text-gray-700 font-medium mb-2">专利类型</label>
                    <select id="patent-type" class="form-control w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">全部</option>
                        <option value="INVENTION">发明专利</option>
                        <option value="UTILITY_MODEL">实用新型</option>
                        <option value="DESIGN">外观设计</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="applicant" class="block text-gray-700 font-medium mb-2">申请人</label>
                    <input type="text" id="applicant" class="form-control w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div class="form-group">
                    <label for="inventor" class="block text-gray-700 font-medium mb-2">发明人</label>
                    <input type="text" id="inventor" class="form-control w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div class="form-group">
                    <label for="status" class="block text-gray-700 font-medium mb-2">专利状态</label>
                    <select id="status" class="form-control w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">全部</option>
                        <option value="APPLIED">已申请</option>
                        <option value="PENDING">审查中</option>
                        <option value="GRANTED">已授权</option>
                        <option value="EXPIRED">已过期</option>
                    </select>
                </div>

                <div class="md:col-span-3 flex justify-center">
                    <button type="button" class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-lg transition-colors">
                        <i class="fa fa-search mr-2"></i>查询
                    </button>
                </div>
            </form>
        </div>

        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="overflow-x-auto">
                <table class="data-table w-full">
                    <thead>
                    <tr class="bg-gray-100">
                        <th data-sort="id" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            ID <span class="sort-icon"></span>
                        </th>
                        <th data-sort="title" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            专利名称 <span class="sort-icon"></span>
                        </th>
                        <th data-sort="patentNumber" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            专利号 <span class="sort-icon"></span>
                        </th>
                        <th data-sort="type" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            类型 <span class="sort-icon"></span>
                        </th>
                        <th data-sort="status" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            状态 <span class="sort-icon"></span>
                        </th>
                        <th data-sort="applicationDate" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            申请日期 <span class="sort-icon"></span>
                        </th>
                        <th data-sort="grantDate" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            授权日期 <span class="sort-icon"></span>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">001</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">一种新型节能设备</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">CN202310123456.X</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">发明专利</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                        已授权
                                    </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-01-15</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-06-20</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                            <a href="#" class="text-green-600 hover:text-green-900 mr-3">下载</a>
                            <a href="#" class="text-red-600 hover:text-red-900">收藏</a>
                        </td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">002</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">智能监控系统</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">CN202320234567.8</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">实用新型</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                        审查中
                                    </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-03-22</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">--</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                            <a href="#" class="text-green-600 hover:text-green-900 mr-3">下载</a>
                            <a href="#" class="text-red-600 hover:text-red-900">收藏</a>
                        </td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">003</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">环保材料结构设计</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">CN202330345678.9</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">外观设计</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                        已授权
                                    </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-10</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-12-05</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                            <a href="#" class="text-green-600 hover:text-green-900 mr-3">下载</a>
                            <a href="#" class="text-red-600 hover:text-red-900">收藏</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="px-6 py-4 bg-gray-50 flex items-center justify-between border-t border-gray-200">
                <div class="flex-1 flex justify-between sm:hidden">
                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        上一页
                    </a>
                    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        下一页
                    </a>
                </div>
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            显示 <span class="font-medium">1</span> 到 <span class="font-medium">3</span> 条，共 <span class="font-medium">12</span> 条结果
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">上一页</span>
                                <i class="fa fa-chevron-left"></i>
                            </a>
                            <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                1
                            </a>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                2
                            </a>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                3
                            </a>
                            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                ...
                            </span>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                4
                            </a>
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">下一页</span>
                                <i class="fa fa-chevron-right"></i>
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 数据可视化 -->
<section id="visualization" class="py-20 bg-white">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-16">数据可视化</h2>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- 专利类型分布 -->
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-bold mb-4">专利类型分布</h3>
                <div class="h-80">
                    <canvas id="patentTypeChart"></canvas>
                </div>
            </div>

            <!-- 年度申请趋势 -->
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-bold mb-4">年度申请趋势</h3>
                <div class="h-80">
                    <canvas id="applicationTrendChart"></canvas>
                </div>
            </div>

            <!-- 案件状态分布 -->
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-bold mb-4">案件状态分布</h3>
                <div class="h-80">
                    <canvas id="caseStatusChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 法律法规 -->
<section id="legal" class="py-20 bg-gray-50">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-16">法律法规</h2>

        <div class="grid md:grid-cols-2 gap-8">
            <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                <h3 class="text-xl font-bold mb-3">《中华人民共和国专利法》</h3>
                <p class="text-gray-600 mb-4">《中华人民共和国专利法》是我国专利制度的基本法律，规定了专利权的取得、保护和行使等方面的内容。</p>
                <a href="#" class="text-blue-600 hover:text-blue-900 inline-flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>

            <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                <h3 class="text-xl font-bold mb-3">《专利法实施细则》</h3>
                <p class="text-gray-600 mb-4">《专利法实施细则》是对《专利法》的具体解释和补充规定，对专利申请、审查、授权等程序进行了详细规定。</p>
                <a href="#" class="text-blue-600 hover:text-blue-900 inline-flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>

            <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                <h3 class="text-xl font-bold mb-3">《专利审查指南》</h3>
                <p class="text-gray-600 mb-4">《专利审查指南》是专利审查员进行专利审查的操作指南，对专利申请的审查标准和程序进行了详细说明。</p>
                <a href="#" class="text-blue-600 hover:text-blue-900 inline-flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>

            <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                <h3 class="text-xl font-bold mb-3">《知识产权海关保护条例》</h3>
                <p class="text-gray-600 mb-4">《知识产权海关保护条例》规定了海关对知识产权的保护措施，包括知识产权备案、扣留侵权货物等内容。</p>
                <a href="#" class="text-blue-600 hover:text-blue-900 inline-flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- 联系我们 -->
<section id="contact" class="py-20 bg-white">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-16">联系我们</h2>

        <div class="grid md:grid-cols-2 gap-12">
            <div>
                <h3 class="text-xl font-bold mb-6">联系方式</h3>

                <div class="space-y-4">
                    <div class="flex items-start">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fa fa-map-marker text-blue-500"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-900">地址</h4>
                            <p class="text-gray-600">北京市海淀区中关村南大街5号</p>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fa fa-phone text-blue-500"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-900">电话</h4>
                            <p class="text-gray-600">010-12345678</p>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fa fa-envelope text-blue-500"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-900">邮箱</h4>
                            <p class="text-gray-600">contact@patent-system.com</p>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fa fa-clock-o text-blue-500"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-900">工作时间</h4>
                            <p class="text-gray-600">周一至周五: 9:00 - 18:00</p>
                        </div>
                    </div>
                </div>

                <div class="mt-8">
                    <h4 class="font-medium text-gray-900 mb-4">关注我们</h4>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 bg-blue-500 hover:bg-blue-600 rounded-full flex items-center justify-center text-white transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-blue-700 hover:bg-blue-800 rounded-full flex items-center justify-center text-white transition-colors">
                            <i class="fa fa-linkedin"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-xl font-bold mb-6">留言反馈</h3>

                <form class="space-y-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                        <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <div>
                        <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                        <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <div>
                        <label for="message" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
                        <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>

                    <button type="button" class="w-full bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg transition-colors">
                        提交留言
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer class="bg-gray-900 text-white py-12">
    <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-4 gap-8">
            <div>
                <h3 class="text-xl font-bold mb-4">专利管理系统</h3>
                <p class="text-gray-400 mb-4">专业的专利管理解决方案，助力企业创新发展，保护知识产权。</p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-weixin"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-weibo"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-linkedin"></i>
                    </a>
                </div>
            </div>

            <div>
                <h4 class="text-lg font-medium mb-4">快速链接</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                    <li><a href="#patents" class="text-gray-400 hover:text-white transition-colors">专利查询</a></li>
                    <li><a href="#visualization" class="text-gray-400 hover:text-white transition-colors">数据可视化</a></li>
                    <li><a href="#legal" class="text-gray-400 hover:text-white transition-colors">法律法规</a></li>
                    <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                </ul> <!-- 这里缺少闭合标签 -->
            </div>
        </div>
    </div>
</footer>